<template>
  <div class="hello">
    <div class="wrap">
      <div class="box">
        滑动组件
      </div>
      <ul class="uls">
        <li v-for="(a,key) in msg"  :key="key" :class="{ open:a.open}" @touchstart="touchStart" @touchend="touchEnd(key,$event)" data-status="0">
          <div class="li-div">
            <img :src="a.src" alt="">
            <div class="nei">
              <div class="left">
                <p>{{a.name}}</p>
                <p>{{a.ll}}</p>
              </div>
              <div class="right">
                <p>{{a.name2}}</p>
              </div>
            </div>
          </div>
          <div class="sc" @click="del(key)">删除</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg:[
            {src:"http://b.zol-img.com.cn/soft/6_64x64/53/cea8ApPt0mA.png",name:"Chrome更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"https://p.ssl.qhmsg.com/dmsmfl/120_115_/t01465e54cb812cf7a7.webp?size=512x512",name:"微信weixin更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"https://p.ssl.qhmsg.com/dmsmfl/120_115_/t0134cc5cbcd9f32e7d.webp?size=1000x924",name:"腾讯视频更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"http://b.zol-img.com.cn/soft/6_64x64/254/ceZkT6e5YRzw.jpg",name:"Chrome更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"http://b.zol-img.com.cn/soft/6_64x64/53/cea8ApPt0mA.png",name:"Chrome更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"http://b.zol-img.com.cn/soft/6_64x64/53/cea8ApPt0mA.png",name:"Chrome更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"http://b.zol-img.com.cn/soft/6_64x64/53/cea8ApPt0mA.png",name:"Chrome更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"http://b.zol-img.com.cn/soft/6_64x64/53/cea8ApPt0mA.png",name:"Chrome更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"http://b.zol-img.com.cn/soft/6_64x64/254/ceZkT6e5YRzw.jpg",name:"Chrome更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false},
            {src:"http://b.zol-img.com.cn/soft/6_64x64/53/cea8ApPt0mA.png",name:"Chrome更新了",ll:"不再支持Flash播放",name2:"上午8.20分",open:false}
      ],
      startClientX:0,
      endClientX:0
    }
  },
  methods: {
    touchStart(e){
      this.startClientX=e.touches[0].clientX;
      console.log(e)
    },
    touchEnd(key,e){
      this.endClientX=e.changedTouches[0].clientX;
      console.log(e);
      if(this.startClientX -this.endClientX >30){
        this.clo();
        this.msg[key].open=true;
      }
      if(this.endClientX - this.startClientX >30){
        this.clo();
      }
      this.startClientX=0;
      this.EndClientX=0;
    },
    clo(){
      for(var i=0;i<this.msg.length;i++){
        this.msg[i].open=false;
      };
    },
    del(key){
      this.msg.splice(key,1)
    }

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  overflow: hidden;
}
li {
  width:100%;
  height:68px;
  border-bottom:1px solid #ccc;
  position:relative;
  transition: transform 0.3s;
}
a {
  color: #42b983;
}
.box{
  text-align: center;
}

img{
  width:42px;
  height:42px;
  float: left;
  margin: 9px;
}
.nei{
  height:68px;
  float: left;
  width:273px;
}
.li-div{
  width:100%;
  float:left;
  height:68px;
}
.left{
  float: left;
  padding-top:6px;
}
.right{
  float:right;
  padding-top:6px;
}
.sc{
  width:85px;
  height:69px;
  background:red;
  line-height: 68px;
  text-align: center;
  position: absolute;
  right:-85px;
  top:0;
  z-index: 2;
}
.open{
  transform: translate(-85px,0)
}
</style>
